<template>

	<scroll-view :style="[styles]" class="scroll-y " :class="[ggclass,{'safe-box':isSafe}]" scroll-y
		@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @scrolltolower="scrolltolower"
		enhanced show-scrollbar :refresher-triggered="triggered" enable-back-to-top scroll-with-animation
		refresher-enabled lower-threshold="120">
		<view class="collect" scroll-anchoring>
			<c-loading-page v-if="pagesStatus==0" :value="pagesStatus==0"></c-loading-page>

			<slot v-else-if="pagesStatus==1" v-bind="list"></slot>

			<view class="empty-wrap" v-if="pagesStatus==2">
				<image :src="emptySrc |imgFilter" mode="widthFix"></image>
				<view>{{ emptyText }}</view>
			</view>
			<c-pull-up-loading :type="pullType"></c-pull-up-loading>
		</view>
	</scroll-view>


</template>

<script>
	export default {
		props: {
			isSafe: {
				type: Boolean,
				default: false
			},
			emptyText: {
				// 说明文字
				type: String,
				default: '这里空空如也...'
			},
			ggclass: {
				type: String,
				default: ''
			},
			emptySrc: {
				// 图片地址
				type: String,
				default: '/static/img/empty.png'
			},
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},
			minHeight: {
				type: String,
				default: ''
			},
			minWidth: {
				type: String,
				default: ''
			},
			api: {
				type: String,
				default: ''
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			pageSize: {
				type: [String, Number],
				default: 10
			},
			padding: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				totalCount: 99,
				list: [],
				queryParams: {
					pageIndex: 1,
					pageSize: 10,
				},
				triggered: false,
				freshing: false,
				pullType: 0,
				pagesStatus: 1,
				result: {},
				dadtaApi: ''
			}
		},
		computed: {
			styles() {
				let params = {
					width: this.$rpxunit(this.width),
					height: this.$rpxunit(this.height),
					minWidth: this.$rpxunit(this.minWidth),
					minHeight: this.$rpxunit(this.minHeight),
					padding: this.padding.split(' ').map(v => this.$rpxunit(v)).join(' ')
				}
				return params
			},
			computedApi: {
				get() {
					if (this.dadtaApi) return this.dadtaApi
					return this.api
				},
				set(val) {
					this.dadtaApi = val
				}
			}
		},
		created() {
			if (this.api) {
				this.init(this.api, {
					...this.params
				})
			}
		},
		methods: {
			async refresherrefresh() {
				this.triggered = true
				if (this.freshing) return;
				this.freshing = true;
				await this.init(this.computedApi, {
					...this.params
				})
				this.triggered = false;
				this.freshing = false;
			},
			refresherrestore() {
				this.triggered = 'restore'; // 需要重置
			},
			async init(api, params) {
				let apis = api
				if (typeof api !== 'string' && !api) {
					apis = this.computedApi
				}
				if (typeof api === 'object') {
					params = api
				}
				this.pullType = 0
				this.queryParams.pageIndex = 1
				let res = await this.getList(apis, params)
				if (this.list.length) {
					this.pagesStatus = 1
				} else {
					this.pagesStatus = 2
				}
				return res
			},
			async getList(api, params) {
				this.pullType = 1
				this.computedApi = api || this.computedApi
				this.queryParams = Object.assign(this.queryParams, this.params, params)
				let {
					result
				} = await this.$http.get(this.computedApi, this.queryParams)
				this.result = result || {}
				if (this.queryParams.pageIndex > 1) {
					this.list.push(...result.items)
				} else {
					this.list = result.items
				}
				this.pullType = 0
				this.totalCount = result.total
				return this.list
			},
			// scroll-view到底部加载更多
			scrolltolower() {
				if (this.list.length >= this.totalCount) {
					this.pullType = 2
				}
				if (this.pullType === 2) return
				this.queryParams.pageIndex += 1;
				this.getList(this.computedApi, this.queryParams)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.scroll-y {
		flex: 1;
		height: 100%;
		box-sizing: border-box;
	}

	.empty-wrap {
		width: 100%;
		padding-top: 120rpx;
		box-sizing: border-box;

		image {
			width: 350rpx;
			height: 290rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		view {
			text-align: center;
			font-size: 26rpx;
			letter-spacing: 1rpx;
			color: #a1adbd;
			margin-top: 5rpx;
		}
	}
</style>